<template>
	<div>
		<el-row type="flex" class="col-split-12" :gutter="20">
			<el-col :span="12">
				<div>
					<kv label="Docker构建镜像">
						<el-input v-model="info.dockerBuildImageName"></el-input>
					</kv>
					<kv label="Docker构建镜像版本">
						<el-input v-model="info.dockerBuildImageVersion"></el-input>
					</kv>

					<kv label="Docker运行镜像">
						<el-input v-model="info.dockerImageName"></el-input>
					</kv>
					<kv label="Docker运行镜像版本">
						<el-input v-model="info.dockerImageVersion"></el-input>
					</kv>
				</div>
			</el-col>

			<el-col :span="12">

				<div>
					<kv label="自定义K8sDeploymentYaml">
						<el-switch v-model="$data.yaml" @change="yaml_change"></el-switch>
					</kv>
					<div v-if="$data.yaml">
						<div>K8sDeploymentYaml:</div>
						<el-input type="textarea" v-model="info.k8sDeploymentYaml"
						          :autosize="{ minRows: 6, maxRows: 12 }"></el-input>
					</div>
					<div v-else>
						<kv label="Pod内存限制">
							<el-input v-model="info.k8sDeploymentMaxMemory"/>
						</kv>
						<kv label="JavaOpts">
							<el-input v-model="info.k8sDeploymentJavaOpts"/>
						</kv>
						<kv label="AppArgs">
							<el-input v-model="info.k8sDeploymentAppArgs"/>
						</kv>
					</div>
				</div>
			</el-col>
		</el-row>

		<div style="margin:20px;text-align:center;">
			<el-button type="primary" @click="ok_click">确定</el-button>
		</div>
	</div>
</template>
<script setup>




defineOptions({
    name: "folder-config",
    inheritAttrs: true,
});

//定义 vue2的this,当前组件
const $self = getCurrentInstance();

//定义 $attrs
const $attrs = useAttrs();



//定义data
const $data = reactive({"yaml":false,"info":{}});
const info = $computed(()=> $data.info );

const $props = defineProps({
    id: { type: String } ,
    action: { type: String }
});

const action_name = $computed(()=>{
    return {add: "添加", edit: "修改"}[$props.action]
});
const $model = defineModel({ type: Object });



const list = ref();

//定义事件
const $emit = defineEmits(["update:modelValue","loaded"]);



const yaml_change = function(v) {
    if (!v) {
        $data.info.k8sDeploymentYaml = "";
    }
};
const ok_click = function() {
    $emit("update:modelValue", $data.info)
    $emit("click", $data.info);
};

onMounted( function() {
    $data.info = $model.value;
    $data.yaml = !!$data.info.k8sDeploymentYaml?.trim();
} )



</script>